<template>
    <view style="background: #f3f6f8;height: 100vh;">
        <view class="header" id="eleDetailHeader">
            <view class="navBarTop">
                <global-nav-bar left-icon="back" :title="navBarTitle" @setHeight="setHeight" :fixed="false"
                    backgroundColor="#2C2C2C" color="#fff" @clickLeft="handleBack"></global-nav-bar>
            </view>
            <view class="content">
                <view class="header_content">
                    <view class="top">
                        <view class="left">
                            <image src="@/static/images/index/eleIcon.png" mode=""></image>
                            <view class="title">
                                <text>{{
                                    eleMsg.buildingName
                                }}</text>
                                <text style="margin-left: 20rpx">{{
                                    eleMsg.elevatorAddress
                                }}</text>
                            </view>
                        </view>
                    </view>
                    <view class="bottom">
                        <view class="msgBox">
                            <view class="itemTag msgBoxItem">
                                <view>
                                    <text>{{
                                        eleMsg.useType == 0 ? "年审梯" : "非年审梯"
                                    }}</text>
                                    <text class="line"></text>
                                </view>
                                <view>
                                    <text>{{ eleMsg.driveModeName || "-" }}</text>
                                    <text class="line"></text>
                                </view>
                                <view>
                                    <text>{{ eleMsg.brandName || "-" }}</text>
                                    <!-- <text class="line"></text> -->
                                </view>
                                <!-- <view>
										<text>{{ `${getYear(eleMsg.madeDate)}年` }}</text>
									</view> -->
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="listTitle">功能/调整</view>
        <view style="padding: 0 20rpx;">
            <view v-for="(item, index) in list" :key="index" class="cardItem" @click="toDetail(item)">
                <view class="time">{{ item.time }}</view>
                <view class="line"></view>
                <view class="desc">
                    <view class="desc_box" v-if="item.typeStatus == 4">
                        <text class="label">零部件:</text>
                        <text class="record_desc">{{ item.allPartName }}</text>
                    </view>
                    <view class="desc_box">
                        <text class="label">{{ item.typeStatus == 4 ? '配件' : '维修' }}:</text>
                        <view class="record_desc">
                            <text v-if="item.problemItemNames && item.problemItemNames.length">
                                {{ item.problemItemNames.join(',') }}</text>
                            <text v-else-if="item.partsNames">{{ item.partsNames }}</text>
                            <text v-if="item.problemItemNames || item.partsNames && (item.partsModel || item.planDesc)">{{
                                ',' }}</text>
                            <view v-if="item.partsModel || item.planDesc">
                                <text> {{ item.typeStatus == 4 ? item.partsModel :
                                    item.planDesc }}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
import GlobalNavBar from '@/components/uni-nav-bar/global-nav-bar';
import { hanleToken } from '@/utils/utils.js';
import { getPitfallList } from '@/apis/elevator.js';
export default {
	components: {
		GlobalNavBar
	},
	created() {
		console.log();
	},
	onShow() {
		if (uni.getStorageSync('pitfall')) {
			let data = uni.getStorageSync('pitfall');
			this.eleMsg = data.eleMsg;
			getPitfallList({
				elevatorId: data.eleMsg.id
			}).then(res => {
				res.data.forEach(item => {
					if (item.partName) {
						item.allPartName = item.partName.replaceAll('&amp;&amp;', '/');
					}
				});
				this.list = res.data;
			});
		}
	},
	onUnload() {
		hanleToken('remove', 'pitfall');
	},
	onHide() {
		hanleToken('remove', 'pitfall');
	},
	data() {
		return {
			eleMsg: {},
			list: [],
			navBarTitle: '整梯隐患'
		};
	},
	methods: {
		setHeight(n) {
			this.mheight = n;
			console.log('n', n);
		},
		toDetail(item) {
			if (item.typeStatus == 2) {
				// 维修详情
				uni.navigateTo({
					url: '/subpages/repair/repariDetail?planId=' + item.planId + '&elevatorId=' + this.eleMsg.id
				});
			}
			// 配件更换
			if (item.typeStatus == 4) {
				uni.navigateTo({
					url: `/subpages/workOrders/partOrder?planId=${item.planId}&elevatorId=${this.eleMsg.id}`
				});
			}
		}
	}
};
</script>
<style lang="scss" scoped>
.header {
    background-color: #f3f6f8;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 10;

    .header_content {
        padding: 34rpx 20rpx 20rpx 28rpx;
        background: #fff;
        margin-bottom: 20rpx;

        .top {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .title {
                font-size: 32rpx;
                font-weight: 600;
                color: #333;
                width: 560rpx;
                // display: flex;
            }

            .left {
                display: flex;

                image {
                    width: 48rpx;
                    height: 48rpx;
                    margin-right: 12rpx;
                }

                .tag {
                    padding: 0rpx 8rpx;
                    font-size: 24rpx;
                    border-radius: 4rpx;
                    border: 1rpx solid;
                    white-space: nowrap;
                }

                .red {
                    color: #e02020;
                    border-color: #e02020;
                }

                .green {
                    color: #16bf99;
                    border-color: #16bf99;
                }
            }

            .right {
                color: #666;
                font-size: 24rpx;
                display: flex;
                position: absolute;
                right: 28rpx;
                top: 40rpx;
                width: 120rpx;
                justify-content: flex-end;
                height: 44rpx;
                // align-items: center;
                height: 80rpx;

                image {
                    width: 28rpx;
                    height: 28rpx;
                }
            }
        }

        .bottom {
            .msgBox {
                padding-left: 60rpx;
                font-size: 24rpx;
                color: #666;

                .slect {
                    background: #f6f6f6;
                    border-radius: 4px;
                    padding: 8rpx 0;
                    padding-left: 20rpx;
                    padding-right: 10rpx;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }

                .msgBoxItem {
                    margin-bottom: 8rpx;
                }

                .itemTag {
                    display: flex;

                    view {
                        height: 32rpx;

                        display: flex;
                        padding-right: 24rpx;
                        position: relative;
                    }

                    .line {
                        width: 2rpx;
                        height: 22rpx;
                        background-color: #ccc;
                        display: flex;
                        position: absolute;
                        right: 10rpx;
                        top: 6rpx;
                    }
                }

                .more {
                    display: flex;
                    color: #0091ff;
                    margin-bottom: 16rpx;
                }
            }

            .addressBox {
                margin-left: 60rpx;

                // height: 108rpx;
                background: #f6f6f6;
                border-radius: 8rpx;
                font-size: 24rpx;
                padding: 20rpx 0 16rpx 16rpx;
                font-size: 24rpx;
                color: #999;

                .top {
                    display: flex;

                    .name {
                        display: flex;
                        // padding-left: 14rpx;
                        font-weight: 600;
                        color: #333;
                        align-items: center;
                    }

                    image {
                        width: 32rpx;
                        height: 32rpx;
                    }
                }

                .buildAddress {
                    padding: 0 20rpx 0 32rpx;
                    margin-left: 10rpx;
                }
            }
        }
    }
}

.listTitle {
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
    padding: 20rpx;
}

.cardItem {
    background: #fff;
    margin-top: 10rpx;
    margin-bottom: 30rpx;
    border-radius: 8rpx;
    box-shadow: 0px 2rpx 18rpx 0px rgba(0, 0, 0, 0.07);
    padding: 20rpx 0;

    .time {
        color: #999999;
        font-size: 24rpx;
        padding-left: 20rpx;
    }

    .line {
        margin: 20rpx 0;
        width: 100%;
        height: 2rpx;
        background: #eee;
    }

    .desc {
        padding-left: 20rpx;

        &_box {
            display: flex;
            align-items: flex-start;
            font-size: 26rpx;
            color: #666;
            margin: 20rpx 0;

            image {
                width: 112rpx;
                height: 112rpx;
                margin-right: 20rpx;
            }

            .label {
                width: 140rpx;
            }

            .record_desc {
                width: calc(100% - 160rpx);
                word-break: break-all;
            }
        }
    }
}
</style>